<template>
    <el-form-item
        :label="label"
        :required="required"
        :validate-status="validation ? 'success' : 'error'"
    >
        <el-input
            v-model="inputValue"
            v-bind="$attrs"
            :placeholder="placeholder"
            :disabled="disabled"
            :clearable="clearable"
            :show-password="props['show-password']"
            :size="size"
            @change="handleChange"
        />
    </el-form-item>
</template>

<script lang="ts">
import { computed, defineComponent, markRaw } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { ComponentType, ComponentCategory } from '@/views/pages/types/component'

export default defineComponent({
    name: 'FormInput',
    metadata: {
        type: ComponentType.FORM_INPUT,
        category: ComponentCategory.FORM,
        label: '输入框',
        icon: markRaw(Edit),
        props: {
            base: {
                label: '输入框',
                placeholder: '请输入',
                required: false,
                disabled: false,
                clearable: true,
                'show-password': false,
                size: 'default'
            },
            style: {
                width: '100%'
            },
            baseSchema: {
                label: {
                    type: 'string',
                    label: '标签'
                },
                placeholder: {
                    type: 'string',
                    label: '占位提示'
                },
                required: {
                    type: 'boolean',
                    label: '必填'
                },
                disabled: {
                    type: 'boolean',
                    label: '禁用'
                },
                clearable: {
                    type: 'boolean',
                    label: '可清除'
                },
                'show-password': {
                    type: 'boolean',
                    label: '密码框'
                },
                size: {
                    type: 'select',
                    label: '尺寸',
                    options: [
                        { label: '默认', value: 'default' },
                        { label: '小', value: 'small' },
                        { label: '大', value: 'large' }
                    ]
                }
            },
            styleSchema: {
                width: {
                    type: 'string',
                    label: '宽度'
                }
            }
        }
    }
})
</script>

<script setup lang="ts">
const props = defineProps<{
    label?: string
    placeholder?: string
    modelValue?: string
    required?: boolean
    disabled?: boolean
    clearable?: boolean
    'show-password'?: boolean
    size?: 'default' | 'small' | 'large'
    validation?: boolean
}>()

const emit = defineEmits<{
    'update:model-value': [value: string]
    validate: [valid: boolean]
}>()

const inputValue = computed({
    get: () => props.modelValue ?? '',
    set: (value) => {
        emit('update:model-value', value)
        // 简单的验证规则：如果required为true，则值不能为空
        if (props.required) {
            emit('validate', !!value)
        } else {
            emit('validate', true)
        }
    }
})

const handleChange = (value: string) => {
    if (props.required) {
        emit('validate', !!value)
    }
}
</script> 